<template>
  <el-descriptions border class="card">
    <el-descriptions-item :label-class-name="getLabelClass(info.label, info.state)" label="文件名" label-align="center"
      width="150px"><span class="fix_width" :title=info.filename>{{
        info.filename
      }}</span></el-descriptions-item>
    <el-descriptions-item :label-class-name="getLabelClass(info.label, info.state)" label="文件大小" label-align="center"
      width="110px">{{
        formatBytes(info.filesize)
      }}</el-descriptions-item>
    <el-descriptions-item :label-class-name="getLabelClass(info.label, info.state)" label="文件格式" label-align="center"
      width="110px"><span class="fix_width" :title=info.filetype>{{
        info.filetype
      }}</span></el-descriptions-item>
    <el-descriptions-item :label-class-name="getLabelClass(info.label, info.state)" label="上传时间" label-align="center"
      width="110px">{{
        formatTime(info.upload_time)
      }}</el-descriptions-item>
    <el-descriptions-item :label-class-name="getLabelClass(info.label, info.state)" label="输出结果" label-align="center">
      <el-tag style="width: 80px" size="large" :type="getTipType(info.state)">{{
        getTip(info.state, info.progress)
      }}</el-tag>
    </el-descriptions-item>
    <el-descriptions-item :label-class-name="getLabelClass(info.label, info.state)" v-if="show_download" label="特征文件"
      label-align="center" width="110px"><el-button size="large" link type="primary" @click="view"
        v-if="show_view">查看</el-button><el-button size="large" link type="primary"
        @click="download">下载</el-button></el-descriptions-item>

    <el-descriptions-item v-if="info.label != null" :label-class-name="getLabelClass(info.label, info.state)" label="输入标签"
      label-align="center"><el-tag style="width: 80px" size="large" :type="getTipType(info.label)">{{
        getTip(info.label)
      }}</el-tag></el-descriptions-item></el-descriptions>
</template>


<script>
export default {
  props: {
    info: {
      type: Object,
    },
    show_download: {
      type: Boolean,
      default: false
    },
    show_view: {
      type: Boolean,
      default: false
    }

  },
  methods: {
    getLabelClass(label, state) {
      if (label != null && ["malignance", "benign"].indexOf(state) > -1) {
        if (label == state) return "blue_bg_light"
        else return "red_bg_light"
      }
      return ""
    },
    formatTime(time) {
      const date = new Date(time);

      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");

      const hours = date.getHours().toString().padStart(2, "0");
      const minutes = date.getMinutes().toString().padStart(2, "0");
      const seconds = date.getSeconds().toString().padStart(2, "0");

      return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
    },
    formatBytes(bytes) {
      const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
      if (bytes === 0) return "0 Byte";
      const i = Math.floor(Math.log(bytes) / Math.log(1024));
      return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sizes[i]}`;
    },
    getTipType(state) {
      switch (state) {
        case "uploading":
          return "info";
        case "running":
        case "analysing":
          return "";
        case "malignance":
          return "danger";
        case "benign":
          return "success";
        case "done":
          return ""
        default:
          return "warning";
      }
    },
    getTip(state, progress) {
      switch (state) {
        case "uploading":
          return "上传中 " + progress + "%";
        case "running":
          return "检测中";
        case "malignance":
          return "恶意";
        case "benign":
          return "良性";
        case "analysing":
          return "分析中"
        case "done":
          return "完成"
        case "error":
        default:
          return "出错";
      }
    },
    view() {
      console.log("mycard view")
      if (this.info.state == "malignance" || this.info.state == "benign" || this.info.state == "done") {
        this.$emit("view")
      }
      else if (this.info.state == "error") {
        this.$message.warning("文件出错，请重试 ...")
      } else if (this.info.state == "uploading") {
        this.$message.info("正在上传中，请稍后 ...")
      } else if (this.info.state == "running") {
        this.$message.info("正在检测中，请稍后 ...")
      } else if (this.info.state == "analysing") {
        this.$message.info("正在分析中，请稍后 ...")
      } else {
        this.$message.info("请稍后 ...")
      }
    },
    download() {
      console.log("mycard download")
      if (this.info.state == "malignance" || this.info.state == "benign" || this.info.state == "done") {
        this.$emit("download")
      }
      else if (this.info.state == "error") {
        this.$message.warning("文件出错，请重试 ...")
      } else if (this.info.state == "uploading") {
        this.$message.info("正在上传中，请稍后 ...")
      } else if (this.info.state == "running") {
        this.$message.info("正在检测中，请稍后 ...")
      } else if (this.info.state == "analysing") {
        this.$message.info("正在分析中，请稍后 ...")
      } else {
        this.$message.info("请稍后 ...")
      }
    }
  },
};
</script>

<style lang="less" scoped>
.card {
  // height: 50px;
  margin: 15px 10px;
  padding: 15px 20px;
  // display: flex;
  // flex-direction: row;W
  // justify-content: space-between;
  border-radius: 3px;
}

.tip {
  line-height: 100%;
}

.uploading {
  // background-color: #fff;
  // width: 50px;
  // height: 50px;
  background-color: #f3f4f7;
}

.running {
  background-color: #a0cfff;
}

.benign {
  background-color: #b3e19d;
}

.malignance {
  background-color: #fab6b6;
}

.fix_width {
  display: inline-block;
  min-width: 180px;
  max-width: 180px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

:deep(.red_bg_light) {
  background-color: #FCD3D3 !important;
}

:deep(.red_bg) {
  background-color: #F89898 !important;
}

:deep(.blue_bg) {
  background-color: #79BBFF !important;
}

:deep(.blue_bg_light) {
  background-color: #C6E2FF !important;
}
</style>

